
import React, {Fragment} from 'react';
import PropTypes from 'prop-types';
import css from './index.less';
import {FEED} from 'utils/feedFunc';
import FrontPage from './frontPage';
import VideoList from './videoList';

import btn2 from 'assert/img/zhuang.jpg';
import btn3 from 'assert/img/banStory.jpg';

export default class Home extends React.Component {

  static propTypes = {
    switchRoute: PropTypes.func,
    itemDetail: PropTypes.array,
  };

  static defaultProps = {

  };


  constructor(props) {
    super(props);
    this.state = {
      route: 'FrontPage',
      time: new Date(),
    };


  }

  componentDidMount() {
    this.timer = setInterval(this.getTime, 10000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);

  }

  switchRoute = (route) => {
    this.setState({
      route: route,
    });
  };

  getTime = () => {
    let time = new Date();
    this.setState({
      time: time,
    });
  };

  renderTime = () => {
    const {time} = this.state;
    // console.log(time);
    let year = time.getFullYear();
    let month = time.getMonth() + 1;
    let tian = time.getDate();
    let hour = time.getHours();
    let min = time.getMinutes();

    // console.log(typeof min);
    let minmin = min < 10 ? `0${min}` : min;
    let hours = hour < 10 ? `0${min}` : hour;

    return (
      <Fragment>
        <div className={css.timeHour}>{`${hours}:${minmin}`}</div>
        <div className={css.timeDay}>{`${year}年${month}月${tian}日`}</div>
      </Fragment>

    );
  };

  renderBtn2 = (btn) => {
    let img = btn === 'btn2' ? btn2 : btn3;
    return (
      <div>
        <img src={img} className={css.bg}/>
        <div className={css.leftBtn} onClick={() => this.setState({route: 'FrontPage'})}/>
        <div className={css.rightBtn} onClick={() => this.props.switchRoute('Slider')}/>
        <div className={css.botBtn} onClick={() => this.setState({route: 'FrontPage'})}/>
      </div>
    );
  };


  renderFrontPage = () => {
    const {itemDetail} = this.props;
    const props = {
      itemDetail,
      switchRoute: this.switchRoute,
      route: this.props.switchRoute, // 这是去slider页面的route
    };
    return <FrontPage {...props}/>;
  };

  renderVideo = () => {
    const {itemDetail} = this.props;
    const props = {
      itemDetail,
      switchRoute: this.switchRoute,
      route: this.props.switchRoute, // 这是去slider页面的route
    };
    return <VideoList {...props}/>;
  };

  renderRoute = () => {
    switch (this.state.route) {
      case 'FrontPage': {
        return this.renderFrontPage();
      }
      case 'VideoList': {
        return this.renderVideo();
      }
      case 'Btn2': {
        return this.renderBtn2('btn2');
      }
      case 'Btn3': {
        return this.renderBtn2('btn3');
      }
      default : {
        return null;
      }
    }
  };

  render() {

    return (
      <div>
        {this.renderRoute()}
        <div className={css.tian}>
          <iframe width="280" scrolling="no" height="30" frameBorder="0" allowTransparency="true"
                  src="http://i.tianqi.com/index.php?c=code&id=1&color=%23FFFFFF&icon=3&wind=0&num=1&site=18"/>
        </div>
        <div className={css.time}>{this.renderTime()}</div>
      </div>

    );
  }
}
